<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat;
            background-size: 100% 130%;
        }

        #login_box {
            width: 20%;
            height: 400px;
            background-color: #00000060;
            margin: auto;
            margin-top: 10%;
            text-align: center;
            border-radius: 10px;
            padding: 50px 50px;
        }

        h2 {
            color: #ffffff90;
            margin-top: 5%;
        }

        #input-box {
            margin-top: 5%;
        }
        input {
            border: 0;
            width: 60%;
            font-size: 15px;
            color: #fff;
            background: transparent;
            border-bottom: 2px solid #fff;
            padding: 5px 10px;
            outline: none;
            margin-top: 10px;
        }

        .button {
            margin-top: 50px;
            width: 60%;
            height: 30px;
            border-radius: 10px;
            border: 0;
            color: #fff;
            text-align: center;
            line-height: 30px;
            font-size: 15px;
            background-image: linear-gradient(to right, #30cfd0, #330867);
        }
        #sign_up {
            margin-top: 45%;
            margin-left: 60%;
        }

        a {
            color: #b94648;
        }
    </style>
</head>

<body>
<div id="login_box">
    <h2>{{user.role}} LOGIN</h2>
    <el-input type="text" placeholder="请输入用户名" v-model="user.username"></el-input>
    <el-input type="password" placeholder="请输入密码" v-model="user.password"></el-input>
    <el-input type="text" placeholder="请输入验证码" v-model="user.verifyCode"></el-input>
    <div style="height: 60px; margin-top: 20px;">
        <el-image :src="verifyImageUrl" style="vertical-align:middle" ></el-image>
        <el-button type="primary" round @click="refreshVerifyImage" >刷新</el-button>
<!--        <button>刷新</button>-->
    </div>
    <el-select v-model="user.role" placeholder="请选择">
        <el-option
                v-for="role in roles"
                :key="role.value"
                :label="role.label"
                :value="role.value">
        </el-option>
    </el-select>

    <button class="button" @click="login">登录</button><br>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#login_box",
        data() {
            return {
                http_prefix:'http://localhost:8080/',
                config : {
                    headers: {'Content-Type': 'application/json;charset=UTF-8'}
                },
                img_config:{
                    responseType: 'blob'
                },
                roles:[
                    {label:"学生",value:"student"},
                    {label:"老师",value:"teacher"},
                    {label:"管理员",value:"administrator"},
                ],
                user:{
                    username:"",
                    password:"",
                    verifyCode:"",
                    role:"teacher"
                },
                verifyImageUrl:""
            }
        },
        methods:{
            hintMsg(msg) {
                this.$message(msg);
            },
            successMsg(msg) {
                this.$message({
                    message: msg,
                    type: 'success'
                });
            },
            warnMsg(msg) {
                this.$message({
                    message: msg,
                    type: 'warning'
                });
            },
            errorMsg(msg) {
                this.$message.error(msg);
            },
            login(){
                axios.post(this.http_prefix+"common/login",JSON.stringify(this.user),this.config).then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg)
                        return;
                    }
                    this.successMsg(resp.data.msg)
                    localStorage.setItem("userId",resp.data.data)
                    localStorage.setItem("role",this.user.role)
                    switch (this.user.role)
                    {
                        case 'teacher':window.location.href="teacher_index.html";break;
                        case 'student':break;
                        case 'administrator':break;
                    }

                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            refreshVerifyImage(){
                axios.get(this.http_prefix+"common/authCode",this.img_config).then(resp=>{
                    console.log(resp)
                    let url = window.URL.createObjectURL(resp.data)
                    this.verifyImageUrl=url
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            init(){
                this.refreshVerifyImage()
            }
        },
        mounted(){
                this.init()
        }
    })
</script>
</html>
